<script setup lang="ts"></script>

<template>
    <main class="flex justify-center mt-10">
        <button class="geology-btn">综合地质预报</button>
    </main>
</template>

<style scoped>
.geology-btn {
    width: 160px;
    height: 30px;
    border: none;
    border-radius: 24px;
    background: linear-gradient(135deg, #3b83f6a9, #2564eb5a);
    color: white;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.8px;
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4);
    cursor: pointer;
    pointer-events: all;
    transition: all 0.3s ease;

    margin-top: 10px;
    margin-left: 10px;
}

.geology-btn:hover {
    background: linear-gradient(135deg, #8a8a8a8f, #8d99ba93);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(37, 99, 235, 0.5);
}

.geology-btn:active {
    transform: translateY(1px);
    box-shadow: 0 2px 10px rgba(37, 99, 235, 0.6);
}
</style>    